<template>
    <div >
        <div class="listBox">
            <div class="listBox_head">
                <el-button type="primary" @click="newBuiltQuestion">新建问题分类</el-button>
            </div>
            <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
                @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
                <template v-slot:img="{ scope }">
                    <el-image style="width: 100px;" :src="scope.row.img" ></el-image>
                </template>
                <template v-slot:operate="{ scope }">
                    <el-button type="text" @click="problemModify(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="problemDelete(scope.row)" size="small">删除</el-button>
                </template>
            </ex-table>
        </div>
        <ClassificationDialog v-if="detailDialog" :id="id" :visible.sync="detailDialog" @success="_handleSuccess" />
    </div>
</template>

<script>
import ClassificationDialog from "./classificationDialog";
import handlePageMixin from "@/mixins/handlePageMixin";
import { questionTypeList,deleteQuestionType } from "@/api/setting/problemConfiguration";

export default {
    name: 'BeeTokenSystemH5QuestionClassification',
    components: {
        ClassificationDialog,
    },
    mixins: [handlePageMixin],
    data() {
        return {
            loading: false,
            detailDialog: false,
            id:'',
            tableData: [],
            tableColumn: [
                { prop: "name", label: "分类名称" },
                { prop: "img",  slot: true, slotName: "img", label: "分类图标" },
                { prop: "sort", label: "排序" },
                { label: "操作",slot: true, slotName: "operate",width: "180",fixed: "right",},
            ],
        };
    },
    created () {
      this.getList()  
    },
    mounted() {

    },

    methods: {
        getList() {
            const params = {
                ...this.pageOptions,
            };
            questionTypeList(params)
                .then((res) => {
                const { total, records } = res.result;
                // records.forEach((item) => {
                //     if (item.province != "") {
                //     item.regionName = item.province + item.city + item.area;
                //     } else {
                //     item.regionName = "-";
                //     }
                // });
                this.$refs.table.pageOptions.total = total;
                this.tableData = records;
                })
                .finally(() => {
               
                });
            },
        // 新建问题
        newBuiltQuestion(){
            this.id = ''
            this.detailDialog = true
        },
        // 编辑
        problemModify(item) {
            this.id = item.id
            this.detailDialog = true
        },
        // 删除
        problemDelete(row){
        this.$confirm("你确定要删除（" + row.name + "）?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            deleteQuestionType(row.id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getList();
              }, 1000);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
        },
        // 前端显示
        frontEndDisplay(){

        },
        // 前端隐藏
        frontEndHidden(){

        },
        // 添加成功
        _handleSuccess() {
            this.pageOptions.pageNum = 1
            this.$refs.table.pageOptions.pageNum = 1
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
    .listBox {
        background-color: #fff;
        margin-top: 10px;
        padding: 20px;
     }
     .listBox_head {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20px;
        .el-button{
            height: 35px;
        }
        .btnBox{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 20px;
        }
     }

</style>